<template>
  <div class="app-container">
    <div style="background-color: #fff; font-size:15px; color: #5A5A5A; border-radius: 10px; padding-bottom: 16px;">
        <RetrievalNumberSearchform v-if="isInitData" :search-form="searchForm"
        :model-type="'retrievalNumber'" @searchFormEmit="searchFormEmit" @totalEmit="totalEmit" />
    </div>
    <div v-loading="loading" class="table-2">
      <div v-if="CompanysList.length" style=" margin-bottom: 2rem;">
        <div v-for="(item, index) in CompanysList" :key="index" :title="item.ComName"
          style="border-bottom: 1px solid #E8E8E8;" class="hover-row">
          <div style="display: flex; align-items: start;">
            <div class="mo1" style="margin-right: 15px;">
              <el-avatar shape="square" :size="50"
                :style="`background: ${extractColorByName(item.ComName)}; font-size: 2.2rem; min-width: 50px`">
                {{ item.ComInitial }}
              </el-avatar>
            </div>
            <div class="mo2" style="margin-right: 250px;">
              <div class="title">
                <router-link :to="{ path: '/retrievalNumber/info?id=' + item.Id }">
                  <div style="display: flex; align-items: center;margin-bottom: 20px;">
                    <span class="namecom">{{ item.ComName }}</span>
                    <img v-if="item.ComLockStatus === 1" class="" src="@/assets/lock16.png" alt=""
                      style="margin-right: 6px;">
                  </div>
                </router-link>
                <div style="margin: 10px 0;">
                  <el-tag v-if="item.ComStatus" size="mini" type="success"
                    style="font-weight: 500;margin-right: 10px;">{{ item.ComStatus }}</el-tag>
                  <span style="font-size: 14px;color: #606266;">{{ item.ComDistFullName }}</span>
                </div>
              </div>
              <div class="content">
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">法定代表人:</span><span style="color: #409EFF">{{
                    item.ComLegalPerson }}</span>
                </div>
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">注册资本:</span><span>{{ item.ComCapital }}</span>
                </div>
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">成立时间:</span><span>{{ item.ComStartDate }}</span>
                </div>
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">统一社会信用代码:</span><span>{{ item.ComNumber }}</span>
                </div>
                <br />
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">资质资格:</span>
                  <span style="color: #409EFF"><router-link :to="{ path: '/retrievalNumber/info?id=' + item.Id }">{{
                    item.ComZiZhiCount }}</router-link></span>
                </div>
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">从业人员:</span>
                  <span style="color: #409EFF"><router-link :to="{ path: '/retrievalNumber/info?id=' + item.Id }">{{
                    item.ComPersonCount }}</router-link></span>
                </div>
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">业绩信息:</span>
                  <span style="color: #409EFF"><router-link :to="{ path: '/retrievalNumber/info?id=' + item.Id }">{{
                    item.ComProjectCount }}</router-link></span>
                </div>
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#F56C6C;"><i class="el-icon-phone-outline"
                      style="margin-right: 4px;"></i>电话:</span><span style="color: #409EFF"><router-link
                      :to="{ path: '/retrievalNumber/info?id=' + item.Id }">{{ item.ComContactCount
                      }}</router-link></span>
                </div>
              </div>
              <el-row v-if="item.ZzNamesWithEndTime != null">
                <el-col :span="20">
                  <el-card shadow="hover">
                    <div
                      v-for="(item2, index2) in item.isExpanded ? item.CompanysListZzNamesWithEndTime : item.CompanysListZzNamesWithEndTime.slice(0, 10)"
                      :key="index2" style="font-size: 14px;color:rgb(96, 98, 102);margin: 4px;">
                      <span style="margin-right: 10px;">该企业的</span>
                      <el-tag type="success" style="margin-right: 10px;">
                        {{ item2.name }}
                      </el-tag>
                      <i class="el-icon-minus"></i>
                      <i class="el-icon-minus" style="margin-right: 10px;"></i>
                      <span v-if="isdeadline(item2.time)" style="margin-right: 10px;">已在</span>
                      <span v-else style="margin-right: 10px;">将在</span>
                      <el-tag :type="isdeadline(item2.time) ? 'danger' : 'warning'" style="margin-right: 10px;">
                        {{ item2.time }}
                      </el-tag>
                      <span class="">过期</span>

                    </div>
                    <el-row v-if="item.CompanysListZzNamesWithEndTime.length > 10" type="flex" justify="center">
                      <el-col :span="2">
                        <el-button @click="toggle(item)" type="text" class="button">
                          <i :class="isExpandedicon ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
                          {{ item.isExpanded ? '收起' : '展开' }}</el-button>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <div class="mo3">
              <img v-if="item.isUnlock === 1" class="" src="@/assets/yanzheng3.png" alt="">
            </div>

          </div>
          <!-- <el-row type="flex">
            <el-col :xs="5" :sm="3" :md="2" :lg="2" :xl="1">
              <el-avatar shape="square" :size="50"
                :style="`background: ${extractColorByName(item.ComName)}; font-size: 2.2rem`">
                {{ item.ComInitial }}
              </el-avatar>
            </el-col>
            <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="21">
              <div class="title">
                <router-link :to="{ path: '/retrievalNumber/info?id=' + item.Id }">
                  <div style="display: flex; align-items: center;margin-bottom: 20px;">
                    <span class="namecom">{{ item.ComName }}</span>
                    <img v-if="item.ComLockStatus === 1" class="" src="@/assets/lock16.png" alt=""
                      style="margin-right: 6px;">
                  </div>
                </router-link>
                <div style="margin: 10px 0;">
                  <el-tag v-if="item.ComStatus" size="mini" type="success"
                    style="font-weight: 500;margin-right: 10px;">{{ item.ComStatus }}</el-tag>
                  <span style="font-size: 14px;color: #606266;">{{ item.ComDistFullName }}</span>
                </div>
              </div>
              <div class="content">
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">法定代表人:</span><span style="color: #409EFF">{{
                    item.ComLegalPerson }}</span>
                </div>
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">注册资本:</span><span>{{ item.ComCapital }}</span>
                </div>
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">成立时间:</span><span>{{ item.ComStartDate }}</span>
                </div>
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">统一社会信用代码:</span><span>{{ item.ComNumber }}</span>
                </div>
                <br />
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">资质资格:</span>
                  <span style="color: #409EFF"><router-link :to="{ path: '/retrievalNumber/info?id=' + item.Id }">{{
                    item.ComZiZhiCount }}</router-link></span>
                </div>
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">从业人员:</span>
                  <span style="color: #409EFF"><router-link :to="{ path: '/retrievalNumber/info?id=' + item.Id }">{{
                    item.ComPersonCount }}</router-link></span>
                </div>
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#606266;">业绩信息:</span>
                  <span style="color: #409EFF"><router-link :to="{ path: '/retrievalNumber/info?id=' + item.Id }">{{
                    item.ComProjectCount }}</router-link></span>
                </div>
                <div style="margin: 0 30px 10px 0; display: inline-block;">
                  <span style="margin-right: 10px;color:#F56C6C;"><i class="el-icon-phone-outline"
                      style="margin-right: 4px;"></i>电话:</span><span style="color: #409EFF"><router-link
                      :to="{ path: '/retrievalNumber/info?id=' + item.Id }">{{ item.ComContactCount
                      }}</router-link></span>
                </div>
              </div>
              <el-row v-if="item.ZzNamesWithEndTime != null">
                <el-col :span="20">
                  <el-card shadow="hover">
                    <div
                      v-for="(item2, index2) in item.isExpanded ? item.CompanysListZzNamesWithEndTime : item.CompanysListZzNamesWithEndTime.slice(0, 10)"
                      :key="index2" style="font-size: 14px;color:rgb(96, 98, 102);margin: 4px;">
                      <span style="margin-right: 10px;">该企业的</span>
                      <el-tag type="success" style="margin-right: 10px;">
                        {{ item2.name }}
                      </el-tag>
                      <i class="el-icon-minus"></i>
                      <i class="el-icon-minus" style="margin-right: 10px;"></i>
                      <span v-if="isdeadline(item2.time)" style="margin-right: 10px;">已在</span>
                      <span v-else style="margin-right: 10px;">将在</span>
                      <el-tag :type="isdeadline(item2.time) ? 'danger' : 'warning'" style="margin-right: 10px;">
                        {{ item2.time }}
                      </el-tag>
                      <span class="">过期</span>

                    </div>
                    <el-row v-if="item.CompanysListZzNamesWithEndTime.length > 10" type="flex" justify="center">
                      <el-col :span="2">
                        <el-button @click="toggle(item)" type="text" class="button">
                          <i :class="isExpandedicon ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
                          {{ item.isExpanded ? '收起' : '展开' }}</el-button>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </el-col>
            <el-col :xs="4" :sm="3" :md="3" :lg="2" :xl="2" style="display: flex; align-items: center;">
              <img v-if="item.isUnlock === 1" class="" src="@/assets/yanzheng3.png" alt="">
            </el-col>
          </el-row> -->
        </div>
      </div>
      <div v-else><el-empty description="暂无数据" /></div>
      <template v-show="totalEmitCopy > listQuery.pageSize">
        <div style="background-color: #fff; border-radius: 0 0 10px 10px;">
          <pagination :total="totalEmitCopy" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize"
            @pagination="getPageList" />
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { getCompanys } from '@/api/company'
import RetrievalNumberSearchform from '@/components/SearchForm/retrievalNumberSearchform.vue'

import Pagination from '@/components/BasicTable/Pagination.vue'
import { extractColorByName } from '@/utils'
import { getDateFormatYMD } from '@/utils/validate.js'
export default {
  name: 'RetrievalNumber',
  components: { RetrievalNumberSearchform, Pagination },
  filters: {
    isdeadline(time) {
      const cur = getDateFormatYMD(new Date);
      const exp = getDateFormatYMD(new Date(time));
      return exp < cur
    }
  },
  data() {
    return {
      isExpandedicon: false, // 控制内容是否展开的变量
      loading: false,
      searchForm: {
        region: true, //  开启地址
        reset: false, // 重置条件
        title: '筛选',
        fields: [
          {
            show: true,
            type: 'input',
            label: '企业名称',
            labelShow: true,
            name: 'comName'
          },
          {
            show: true,
            type: 'input',
            label: '统一社会信用代码',
            labelShow: true,
            name: 'comNumber'
          },
          {
            show: true,
            type: 'input',
            label: '经营范围',
            labelShow: true,
            name: 'comBusinessScope'
          },
          {
            show: true,
            type: 'region',
            label: '企业注册属地',
            labelShow: true,
            name: 'distId',
            options: null
          },
          {
            show: true,
            type: 'select',
            label: '资质到期时间',
            labelShow: true,
            name: 'endDateId',
            options: [
              { value: '0', label: '全部' },
              { value: '1', label: '已经过期' },
              { value: '2', label: '1个月' },
              { value: '3', label: '3个月' },
              { value: '4', label: '半年' },
              { value: '5', label: '1年' }
            ]
          },
          {
            show: true,
            type: 'multipleSelect',//inputAutocomplete,multipleSelect
            label: '资质名称',
            labelShow: true,
            name: 'zzName'
          },
          {
            name: 'zzTypeId'
          },
          {
            show: true,
            type: 'sortType',
            label: '排序',
            labelShow: true,
            name: 'sortType',
            options: [
              { value: '0', label: '从少到多' },
              { value: '1', label: '从多到少' }
            ]
          },
          {
            show: true,
            type: 'sortWay',
            label: '排序方式',
            labelShow: true,
            name: 'sortFieldId',
            options: [
              { value: '1', label: '创建时间' },
              { value: '2', label: '资质数量' },
              { value: '3', label: '人员数量' },
              { value: '4', label: '业绩数量' },
              { value: '5', label: '联系人数量' }
            ]
          },
        ]
      },
      totalEmitCopy: 0,
      countcount: 0,
      listQuery: {
        page: 1,
        pageSize: 10
      },
      CompanysList: [],
      p: {},
      isInitData: true,
      distId: '0',
      options: [],
      descriptionsList: {
        ComLegalPerson: '法定代表人',
        ComStartDate: '成立时间',
        ComCapital: '注册资本',
        ComDistFullName: '企业注册属地',
        ComRegisterOffice: '登记机关',
        ComIndustry: '所属行业',
        ComNumber: '统一社会信用代码',
        ComAddress: '经营地址'
      }
    }
  },
  created() {
  },
  methods: {
    toggle(item) {
      this.isExpandedicon = !this.isExpandedicon; // 切换isExpandedisExpandedicon的值,
      item.isExpanded = !item.isExpanded;
    },
    isdeadline(time) {
      const cur = getDateFormatYMD(new Date);
      const exp = getDateFormatYMD(new Date(time));
      return exp < cur
    },
    // 3
    async getPageList(v) {
      this.listQuery = { ...this.listQuery, ...v ?? {} }
      this.loading = true
      getCompanys(this.listQuery).then(async (res) => {
        this.loading = false
        if (res.code === 200) {
          this.CompanysList = res.data.pageList
          this.CompanysList.forEach((items) => {
            if (items.ZzNamesWithEndTime != null) {
              let str = items.ZzNamesWithEndTime
              let a = []
              a.push(str.split('@').map(part => part.trim()))
              items.CompanysListZzNamesWithEndTime = []
              a[0].forEach((el) => {
                items.CompanysListZzNamesWithEndTime.push({ name: el.split('|')[0], time: el.split('|')[1] })
              })
            }
          })
        }
      })
    },
    // 4
    searchFormEmit(v) {
      this.listQuery.page = 1
      this.listQuery = { ...this.listQuery, ...v }
      this.getPageList()
    },
    totalEmit(v) {
      this.totalEmitCopy = v
    },
    // 7
    extractColorByName(name) {
      return extractColorByName(name)
    }
  }
}
</script>
<style lang="scss" scoped>
.table-2 {
  padding-bottom: 1rem;
  background-color: #fff;
  overflow: auto;
  border-radius: 10px 10px 0 0;
}

::v-deep .el-tabs__active-bar {
  height: 0 !important;
}

::v-deep .el-tabs__nav-wrap::after {
  height: 0 !important;
}

::v-deep .el-tabs__item.is-active {
  background-color: #EBF6FF;
  border-radius: 5px;
}

::v-deep .el-tabs--top .el-tabs__item.is-top {
  padding: 0 20px;
}

.hover-row {
  padding: 20px;
  border-radius: 10px;

}

.title {
  font-size: 17px;
}

.namecom {
  margin-right: 20px;
}

.title:hover .namecom {
  color: #409EFF;
}

.content {
  font-size: 14px;
}
</style>
